<template>
	<view class="container">
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="../../static/search.png" />
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10"
					@click="toclassification" />
				<button class="search-btn">搜索</button>
				<!-- v-model="this.getdata" -->
			</view>
		</view>
		<view class="large" v-for="(item,index) in list" :key="index">
			<view class="info">
				<view class="name">
					{{item.title}}
				</view>
				<view class="boxbottom">
					<view class="photo" v-if="item.photoList">
						<image :src="item.photoList" mode=""></image>
					</view>
					<view class="describe">
						<view class="ww">
							{{item.description}}
						</view>

	
					</view>
					<view class="price">
						来源：{{item.source}}
						<view>
							{{item.time}}
						</view>
					</view>
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					size: 10,
					userId: '202108764312'
				},
				list: [{
						title: "革命老区雷州塘仔村：传承红色基因 推进乡村振兴",
						photoList: 'https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/f799c110-1412-4310-8b11-eeff1e2b7e7a8588659490408123827.jpg',
						description: "革命老区雷州塘仔村：传承红色基因 推进乡村振兴革命老区雷州塘仔村：传承红色基因 推进乡村振兴革命老区雷州塘仔村：传承红色基因 推进乡村振兴 ",
						source: "中国青年报",
						time: "2021-08-05"
					},
					{
						title: "茂胆村红色基因传承教育基地正式挂牌",
						photoList: 'https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/ed8cf19d-a619-4216-96b2-7e793c97a61b8134290836866569260.jpg',
						description: "为传承红色基因，弘扬红色文化，充分发挥红色革命教育资源作用。",
						source: "湛江日报",
						time: "2021-07-23"
					},
					{
						title: "湛江雷州调研组到雷州茂胆村调研革命遗址挖掘红色内涵保护利用好革命遗址",
						photoList: 'https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/c640514b-a92a-4a1d-b784-4eb3e94328032904941073622621958.jpg',
						description: "6月2日，湛江市委宣传部、党史研究室、老促会，雷州市委宣传部、党史市志研究室、老促会组成调研组到雷州市沈塘镇调研革命老区",
						source: "南方日报",
						time: "2020-06-05"
					},
					{
						title: "雷州市附城镇河北村重修革命遗址 传承红色基因",
						photoList: 'https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/85108814-eef5-42e5-9879-f9035306e16b8180200727266283091.jpg',
						description: "本网讯（记者 戴李春 林平兰）12月3日，革命老区村庄——附城镇河北村彩旗招展",
						source: "腾讯网",
						time: "2021-05-05"
					},
					{
						title: "雷州市委政法委到遂溪西南区革命史馆、黄学增故居开展红色教育活动",
						photoList: 'https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/db5559a7-a5be-472b-af3c-7e64dc010a423414197567518773638.jpg',
						description: "为推进政法队伍教育整顿和党史学习教育走深走实，用红色文化凝神聚魂，锻造纯洁忠诚的政法队伍",
						source: "新闻网",
						time: "2020-10-04"
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f4f4f4;
	}

	.large {
		position: relative;
		// width: 95%;
		// height: 120px;
		margin: 10px 0;
		background-color: #ffffff;
		border-radius: 20px;
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 10px;
	}

	.photo {
		display: inline-block;
		width: 60px;
		height: 60px;
		margin: 2%;

		image {
			width: 100%;
			height: 100%;

		}
	}

	.name {
		box-sizing: border-box;
		width: 92vw;

		font-size: 19px;
		font-weight: 550;
		margin: 10px 10px;
		// border-bottom: 1px solid #dddddd;
		color: #64727e;
		// padding-top: 5px;
		padding-bottom: 1px;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}

	.boxbottom {
		width: 100%;
		border-top: 1px solid #dddddd;


	}

	.describe {
		display: inline-block;
		width: 70%;
		margin: 10px 10px;
		font-size: 17px;
		height: 60px;
		line-height: 25px;
		vertical-align: top;
		// text-overflow: ellipsis;
		// overflow: hidden;
		// white-space: nowrap;
		.ww {
			    overflow: hidden;
			    -webkit-line-clamp: 2;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-box-orient: vertical;
		}
	}

	.price {
		display: flex;
		width: 90%;
		margin-top: 10px;
		margin-left: 5px;
		color: #adadad;
		justify-content: space-between;
	}

	.circle {
		position: absolute;
		top: 20px;
		right: -20px;
		font-size: 50px;
		font-weight: 300;
		color: #c6d9df;
		-moz-transform: rotate(-40deg);
		-webkit-transform: rotate(-40deg);
		// border: 1px solid #ccc;
		border-radius: 20%;
	}

	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 3%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 70rpx;
		border: 5rpx solid #ff5500;
		border-radius: 50rpx;
	}

	.search-span {
		width: 15%;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #ca4322;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}
</style>
